<template>
  <div class="scorecreatewrapper zanwei-top">
    <head-nav></head-nav>
    <div class="scorecreate" v-if="rowobj">
      <div class="scorecreate-top-img">
        <img :src="rowobj.TP">
      </div>
      <div class="scorecreate-top">
        <div>
          <p :style="textColor">{{rowobj.MZ}}{{rowobj.DW}}{{rowobj.LPMC}}</p>
        </div>
      </div>
      <div class="scorecreate-bottom">
        <div class="qrcode" id="qrcode">
          <!-- <img/> -->
        </div>
        <div class="dh">
          <p class="dh">{{rowobj.HXDD}}</p>
        </div>
      </div>
      <div class="sysm">
        <h4 v-if="rowobj.YHQTYPE == 1">优惠券使用说明</h4>
        <h4 v-else-if="rowobj.YHQTYPE == 2">生日券使用说明</h4>
        <h4 v-else-if="rowobj.YHQTYPE == 3">停车券使用说明</h4>
        <div class="smhtml">
          <div v-html="sysm"></div>
        </div>
      </div>

    </div>
    <div class="zanwei-bottom"></div>
    <!-- 底部导航 -->
    <!-- <foot-nav></foot-nav> -->
  </div>
</template>

<script>
  import api from "@/api/api";
  import {Toast, MessageBox} from "mint-ui";
  import {mapActions} from "vuex";
  import {userInfo} from "os";

  var sss;
  var setTime;

  export default {
    data() {
      return {
        rowobj: null,
        yhqid: "",
        sysm: ''
      };
    },
    methods: {
      ...mapActions({
        commit_title: "commit_title"
      }),
      checkHX(yhqid) {
        let page = this;
        var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        /**
         * 查询一个我的订单
         * @param page
         * @param cb
         * @param userid 用户卡号
         * @param oid 订单id
         */
        api.getCjhyYhqById(page, userinfo.vipcode, yhqid, cb);

        function cb(res) {
          let re = res.data;
          if (re.code == 0) {
            let data = re.data;
            let hx = data.SFHX;
            if (hx == 1) {
              clearInterval(sss);
              Toast({
                message: "已核销",
                iconClass: "iconfont icon-duigou yhx",
                duration: 3000
              });
              setTimeout(function () {
                page.$router.push("/wallet");
              }, 3000);
            }
          } else {
            Toast({
              message: re.msg,
              duration: 3000
            });
          }
        }
      }
    },
    mounted() {
      let page = this;
      let yhqid = this.$route.params.id;
      page.yhqid = yhqid;
      if (yhqid != "" && yhqid != null && yhqid != undefined) {
        var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        //查询一个优惠券
        api.getCjhyYhqById(page, userinfo.vipcode, yhqid, res => {
          let re = res.data;
          if (re.code == 0) {
            let data = re.data;
            if (data.YHQTYPE == "1") {
              data.LPMC = "购物券";
              data.TP = "";
              data.TP = page.host.filehost + data.HYKINFO.GWQTP[0].ID;
              data.HXDD = data.HYKINFO.GWQHXDD;
              this.sysm = data.HYKINFO.YHQSYSM
            } else if (data.YHQTYPE == "2") {
              data.LPMC = "生日券";
              data.TP = page.host.filehost + data.HYKINFO.SRQTP[0].ID;
              data.HXDD = data.HYKINFO.SRQHXDD;
              this.sysm = data.HYKINFO.SRQSYSM
            } else if (data.YHQTYPE == "3") {
              data.LPMC = "停车券";
              data.TP = page.host.filehost + data.HYKINFO.TCQTP[0].ID;
              data.HXDD = data.HYKINFO.TCQHXDD;
              this.sysm = data.HYKINFO.TCQSYSM
            }
            page.rowobj = data;
            page.$nextTick(function () {
              var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: "cjvip_yhq_" + data.ID,
                width: 128,
                height: 128,
                colorDark: "#000000",
                colorLight: "#ffffff"
              });
            });

            // 核销监听
            let date = new Date();
            if (page.rowobj.SFHX == 0) {
              sss = setInterval(function () {
                let dateNow = new Date();
                let time = dateNow - date;
                console.log(time);
                if (time < 300000) {
                  page.checkHX(page.yhqid);
                } else {
                  clearInterval(sss);
                  MessageBox.alert("长时间未核销正帮您跳转..").then(action => {
                    page.$router.push({path: "/score"});
                  });
                }
              }, 1000);
            }
          } else {
            Toast({
              message: re.msg,
              duration: 5000
            });
            setTime = setTimeout(function () {
              page.$router.go(-1);
            }, 5000);
          }
        });
      }
    },
    destroyed() {
      clearInterval(sss);
      clearTimeout(setTime);
    }
  };
</script>

<style lang="less">
  .yhx {
    font-size: 0.55rem;
  }

  .scorecreatewrapper {
    .scorecreate {
      .scorecreate-top-img {
        /* width: 4.4rem;
        height: 1.7rem;
        border: #cbcbcc solid 1px;
        margin-top: 1.12rem;
        margin-bottom: 0.6rem; */
        width: 100%;
        height: 4rem;
        margin-top: .4rem;
        /* border: #cbcbcc solid 1px; */
        margin-bottom: 0.4rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .scorecreate-top {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0.2rem;

        &::before {
          content: "";
          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 0px;
          width: 100%;
          height: 1px;
          border-bottom: 1px dashed #f05dc4;
          transform: scaleY(0.5);
          transform-origin: 0 100%;
        }

        h3 {
          font-size: 0.32rem;
          color: #000000;

          span {
            margin-left: 0.1rem;
          }
        }

        .numb {
          font-size: 0.32rem;
          color: #000000;
          line-height: 0.5rem;
        }

        /*span {
          color: #F05DC4;
          font-size: 0.32rem;
          margin-top: 0.2rem;
          margin-bottom: 0.6rem;
        }*/

        b {
          display: block;
          color: #000000;
          font-size: 0.24rem;
        }

        p {
          color: #f05dc4;
          font-size: 0.32rem;
          margin-top: 0.04rem;
          margin-bottom: 0.2rem;
          text-indent: 0.28rem;
        }
      }

      .sysm {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: .4rem 0.2rem .2rem;

        h4 {
          margin-bottom: .2rem;
          font-size: .33rem;
        }

        &::before {
          content: "";
          position: absolute;
          z-index: 2;
          top: .6rem;
          left: 0px;
          width: 100%;
          height: 1px;
          border-bottom: 1px dashed #f05dc4;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
        }

      }

      .smhtml {

        padding: 0 .2rem;
        font-size: 0.24rem;
        color: #000000;
        width: 4.56rem;
        justify-self: center;
        margin-top: .2rem;
      }

      .scorecreate-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        .qrcode {
          width: 2.8rem;
          height: 2.8rem;
          /* border: #cbcbcc solid 1px; */
          margin-top: 0.3rem;
          margin-bottom: 0.3rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .dh {
          width: 4.56rem;
          font-size: 0.24rem;
          color: #000000;
          text-align: center;
        }

        .dh2 {

          font-size: 0.24rem;
          color: #000000;
          text-align: center;
        }
      }
    }

    .tkcg {
      margin-top: 0.5rem !important;
    }
  }
</style>
